---
layout: default
---

<!-- Post Header -->
{% include intro-header.html type='keynote' %}


<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

            <!-- Post Container -->
            <div class="post-container
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1 ">

				{{ content }}

                <hr style="visibility: hidden;">
                <ul class="pager">
                    {% if page.previous.url %}
                    <li class="previous">
                        <a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">
                        Previous<br>
                        <span>{{page.previous.title}}</span>
                        </a>
                    </li>
                    {% endif %}
                    {% if page.next.url %}
                    <li class="next">
                        <a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">
                        Next<br>
                        <span>{{page.next.title}}</span>
                        </a>
                    </li>
                    {% endif %}
                </ul>
                <hr style="visibility: hidden;">
		
		        <!-- Gitalk 评论 start  -->
                {% if site.gitalk.enable %}
                    <!-- Gitalk link  -->
                    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
                    <script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>

                    <div id="gitalk-container"></div>
                    <script type="text/javascript">
                        var gitalk = new Gitalk({
                        clientID: '{{site.gitalk.clientID}}',
                        clientSecret: '{{site.gitalk.clientSecret}}',
                        repo: '{{site.gitalk.repo}}',
                        owner: '{{site.gitalk.owner}}',
                        admin: ['{{site.gitalk.admin}}'],
                        id: window.location.pathname,
                        });
                        gitalk.render('gitalk-container');
                    </script>
                {% endif %}
                <!-- Gitalk end -->
            </div>

            <!-- Sidebar Container -->
            <div class="sidebar-container
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1 ">

                <!-- Featured Tags -->
                {% include featured-tags.html %}

            </div>
        </div>
    </div>
</article>

<!-- resize header to fullscreen keynotes -->
<script>
    var $header = document.getElementsByTagName("header")[0];
    function resize(){
        /*
         * leave 85px to both
         * - told/imply users that there has more content below
         * - let user can scroll in mobile device, seeing the keynote-view is unscrollable
         */
        $header.style.height = (window.innerHeight-85) + 'px';
    }
    document.addEventListener('DOMContentLoaded', function(){
        resize();
    })
    window.addEventListener('load', function(){
        resize();
    })
    window.addEventListener('resize', function(){
        resize();
    })
    resize();
</script>


{% if site.anchorjs %}
    <!-- async load function -->
    <script>
        function async(u, c) {
        var d = document, t = 'script',
            o = d.createElement(t),
            s = d.getElementsByTagName(t)[0];
        o.src = u;
        if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
        s.parentNode.insertBefore(o, s);
        }
    </script>
    <!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
    <script>
        async("//cdnjs.cloudflare.com/ajax/libs/anchor-js/1.1.1/anchor.min.js",function(){
            anchors.options = {
            visible: 'always',
            placement: 'right',
            icon: '#'
            };
            anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
        })
    </script>
    <style>
        /* place left on bigger screen */
        @media all and (min-width: 800px) {
            .anchorjs-link{
                position: absolute;
                left: -0.75em;
                font-size: 1.1em;
                margin-top : -0.1em;
            }
        }
    </style>
{% endif %}
